<template>
	<view class="tool">
		<view class="chat_bar">
			<input type="text" maxlength="2000"  v-model="inputMsg" @confirm="submit" confirm-type="send" :focus="isFocus" />
			<view class="bar_btn" @tap="emojiOn">
				<image src="../../static/images/chatTool/look.png" mode=""></image>
			</view>
		</view>
		<view class="emoji" v-show="emojiShow">
			<emoji-list @getEmoji="getEmoji"></emoji-list>
			<view class="emoji_btn">
				<view class="delate_btn" @tap="delate">
					<image src="../../static/images/chatTool/emojiDelate.png" mode=""></image>
				</view>
				<view class="send_btn" @tap="submit">发送</view>
			</view>
		</view>
	</view>
</template>

<script>
	import emojiList from './emojiList/emojiList.vue'
	import {
		formatFileTime
	} from '../../common/js/myFunc.js'
	//录音管理
	const recorderManager = uni.getRecorderManager();
	export default {
		data() {
			return {
				emojiShow: false,
				inputMsg: '',
				time: 0,
			};
		},
		components: {
			emojiList
		},
		watch: {
			emojiShow() {
				this.$nextTick(function() {
					this.getToolHeight()
				});
			}
		},
		methods: {
			voiceOn() {
				this.voiceShow = !this.voiceShow
				this.emojiShow = false;
				this.addShow = false;

			},
			emojiOn() {
				this.emojiShow = !this.emojiShow;
				this.addShow = false;
				this.voiceShow = true
			},
			
			//发送文字
			submit() {
				if (this.inputMsg.length > 0) {
					this.$emit('newMsg', {
						message: this.inputMsg,
						type: 0
					})
					this.inputMsg = ''
				}
			},
			//表情页删除按钮
			delate() {
				if (this.inputMsg.length > 0) {
					this.inputMsg = this.inputMsg.substring(0, this.inputMsg.length - 2) //表情代码占两个字符
				}
			},
			//获取chatTool高度
			getToolHeight() {
				const query = uni.createSelectorQuery().in(this);
				query.select('.tool').boundingClientRect(data => {
					this.$emit('getHeight', data.height)
				}).exec();
			},
			//获取点击的表情
			getEmoji(e) {
				this.inputMsg += e;
			},
			
		}
	}
</script>

<style lang="scss">
	.tool {
		width: 100%;
		background: #F4F4F4;
		position: fixed;
		bottom: 0;
		border-top: 1rpx solid $uni-border-color;
		z-index: 99;

		.chat_bar {
			position: relative;
			width: 100%;
			display: flex;
			align-items: flex-end;
			padding: 14rpx 22rpx 20rpx 22rpx;
			z-index: 101;
			background: #F4F4F4;

			// textarea{
			// 	flex: 1;
			// 	box-sizing: content-box;
			// 	background: #FFFFFF;
			// 	border-radius: 10rpx;
			// 	padding: 14rpx;
			// 	margin: 0 20rpx;
			// 	max-height:160rpx ;
			// }
			input {
				flex: 1;
				box-sizing: content-box;
				background: #FFFFFF;
				border-radius: 10rpx;
				padding: 14rpx;
				margin: 0 20rpx;
				height: 100%;

			}

			.btn_record {
				flex: 1;
				display: flex;
				justify-content: center;
				align-items: center;
				background: #FFFFFF;
				border-radius: 10rpx;
				margin: 0 20rpx;
				padding: 14rpx;
			}

			.bar_btn {
				flex: 0;
				width: 56rpx;
				height: 72rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-right: 30rpx;

				image {
					width: 56rpx;
					height: 56rpx;

				}
			}

		}

		.emoji {
			width: 100%;
			height: 460rpx;
			background-color: rgba(236, 237, 238, 1);

			.emoji_btn {
				width: 220rpx;
				height: 100rpx;
				position: fixed;
				bottom: 0;
				right: 0;
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-right: 30rpx;

				.delate_btn {
					width: 100rpx;
					height: 70rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					background-color: #FFFFFF;
					border-radius: 24rpx;

					image {
						width: 45%;
						height: 45%;
					}
				}

				.send_btn {
					width: 100rpx;
					height: 70rpx;
					font-size: 32rpx;
					line-height: 70rpx;
					text-align: center;
					background-color: rgba(255, 228, 49, 1);
					border-radius: 24rpx;
				}
			}

		}

		.add {
			width: 100%;
			height: 800rpx;
			background-color: rgba(236, 237, 238, 1);
			// bottom:env(safe-area-inset-bottom);
			padding: 0 20rpx;

			.add_list {
				display: flex;
				justify-content: flex-start;
				flex-wrap: wrap;

				.add_item {
					width: 25%;
					margin-top: 50rpx;
					// flex: auto;
					display: flex;
					flex-direction: column;
					align-items: center;

					.add_img {
						width: 110rpx;
						height: 110rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						background-color: #FFFFFF;
						border-radius: 24rpx;

						image {
							width: 55%;
							height: 55%;
						}
					}

					.title {
						font-size: 24rpx;
						color: $uni-text-color-grey;
						line-height: 50rpx;
					}
				}
			}
		}

		.voice_mask {
			width: 100%;
			height: 100%;
			position: fixed;
			background-color: rgba(0, 0, 0, 0.4);
			top: 0;
			z-index: 100;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.record_length_bg {
				position: relative;
				height: 84rpx;
				width: 600rpx;
				background-color: rgba(255, 255, 255, 0.4);
				border-radius: 42rpx;

				.record_length {
					position: absolute;
					top: 0;
					left: 50%;
					transform: translateX(-50%);
					height: 84rpx;
					min-width: 120rpx;
					text-align: center;
					line-height: 84rpx;
					background-color: $uni-color-primary;
					color: $uni-text-color-inverse;
					border-radius: 42rpx;
				}
			}

			.record_cancel {
				position: absolute;
				bottom: 200rpx;
				width: 120rpx;
				height: 120rpx;
				border-radius: 60rpx;
				background-color: $uni-color-primary;
				display: flex;
				justify-content: center;
				align-items: center;

				image {
					color: $uni-text-color-inverse;
					width: 50%;
					height: 50%;
				}
			}

			.cancel_on {
				background-color: $uni-color-warning;
			}

			.cancel_tip {
				position: absolute;
				bottom: 140rpx;
				width: 100%;
				text-align: center;
				color: $uni-text-color-inverse;
				font-size: $uni-font-size-base;
			}
		}
	}
</style>
